<template>
  <div class="file">
    <div class="toolbar" @click="show = !show">
      <i :class="show ? 'el-icon-minus':'el-icon-plus'"></i>
    </div>

    <div style="float: left; margin-left: 15px; height: 35px;">
      <transition name="el-zoom-in-center">
        <div v-show="show" class="transition-box">
          <!-- 文件选择 -->
          <el-popover ref="popover4" trigger="hover" placement="top">
            <el-button
              plain
              size="mini"
              v-for="(item,index) of files"
              @click="clickFile(item,index)"
              :key="index"
              class="file_button"
            >{{item.name}}</el-button>
            <el-button
              class="file_button"
              plain
              size="mini"
              @click="dialogTableVisible = true"
              type="danger"
            >+ 共享文件</el-button>
          </el-popover>
          <el-button v-popover:popover4 size="small" style="float: left;">{{thisFile}}</el-button>
          <!-- 文件选择end -->
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="1"
              layout="prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </transition>
    </div>
    <!-- myFile -->
    <el-dialog title="我的文件" :visible.sync="dialogTableVisible" :modal="modalVisible" width="600px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="上传日期" width="160">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.ctime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="文件名" width="300">
          <template slot-scope="scope">
            <el-popover>
              <!-- <el-popover trigger="hover" placement="top"> -->
              <!-- <p>文件名: {{ scope.row.fileName }}</p> -->
              <!-- <p>住址: {{ scope.row.address }}</p> -->
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="共享操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :type="scope.row.btn_style"
              @click="handleEdit(scope.$index, scope.row)"
            >{{ scope.row.btn_text }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { FileOption, FileLogin, FileConvert } from "../../service/api";

export default {
  props: ["files", "host", "imgIndex", "gxFile"],
  data: () => ({
    show: true,
    thisFile: '选择文件',
    total: 0,
    btn_style: 'danger',
    dialogTableVisible: false,
    modalVisible: false,
    tableData: [],
    url: 'http://192.168.96.105:9090/documentation/no_token/reader.action/',
    imgList: null,
    fileAccount: null,
    currentPage: 0,

  }),
  watch: {
    files: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        this.getFileList("/");
      },
      deep: true
    },
    gxFile: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        console.log(newV, oldV)
        this.thisFile = newV.thisFile;
        // 第二步：正在查看哪个用户的文件，将该用户account 赋给 fileAccount
        this.fileAccount = newV.fileAccount
        this.imgList = newV.imgList;
        // 第七步：数组的长度决定了页码的数量
        this.total = newV.imgList.length;
        this.currentPage = newV.imgIndex + 1;
      },
      deep: true
    }
  },
  mounted() {
    this.getFileList("/");
  },
  methods: {
    async getFileList(path) { // 获取文件列表
      let data = {
        account: window.localStorage.getItem("account"),
        appid: "minyanan_chanpin",
        action: "dir",
        path: path, //相对于哪个目录操作
        // type: "folder", //文件夹标识
        sort: "0",
        keyword: ""
      };
      // 第一步：先获取根目录下的文件和文件夹
      FileOption(data).then(res => {
        if (res.code == 100) {
          console.log(res)
          let fileArr = [];
          // 第二步：循环该房间已经共享过的文件，找出自己之前共享的文件，放入fileArr
          for (let q = 0; q < this.files.length; q++) {
            if (this.files[q].account == window.localStorage.getItem("account")) {
              fileArr.push(this.files[q].name)
            }
          }
          // 第三步：循环获取到的文件列表，根据上面的fileArr，将文件更改为已共享，和可以共享两种状态
          for (let i = 0; i < res.result.length; i++) {
            if (fileArr.indexOf(res.result[i].name) != -1) {
              res.result[i].btn_style = 'danger';
              res.result[i].btn_text = '已共享';
            } else if (res.result[i].type == 'folder') {
              res.result[i].btn_style = 'primary';
              res.result[i].btn_text = '打开';
            } else {
              res.result[i].btn_style = 'success';
              res.result[i].btn_text = '共享';
            }
          }
          this.tableData = res.result; // 可共享的所有文件数组
          console.log(this.tableData)
        }
      });
    },
    clickFile(file, index) { // 选择查看文件
      console.log(file, index, this.host)
      if (this.host == 1) { // 主持人才能选择查看文件
        if (file.name == '三维模型') {
          this.thisFile = file.name;
          this.total = 0;
          let obj = {  // 发送选择文件信息
            type: 'drawInfo',
            data: {
              type: "three",
            }
          };
          this.$parent.websocketsend(obj);
          this.$emit('Url', 'three');
        } else {
          // 第一步：将底部文件导航改为正在查看的文件
          this.thisFile = file.name;
          // 第二步：正在查看哪个用户的文件，将该用户account 赋给 fileAccount
          this.fileAccount = file.account

          let data = { // 获取转换文件所需要的参数
            oper: 1,//1是获取该文件的image文件；；2是获取该文件的pdf文件
            account: this.fileAccount,
            appid: "minyanan_chanpin",
            file_path: "/" + this.thisFile
          };
          // 第三步：获取文件转成的图片
          FileConvert(data).then(res => {
            console.log("获取所有图片", res);
            if (res.code == 100) {
              // 第四步：将获取到的图片数组保存到imList，方便后续切换页码的时候访问
              this.imgList = res.result;
              // 第五步：拼图片路径
              this.url += this.thisFile + '?'
              this.url += 'appid=minyanan_chanpin&account=' + this.fileAccount + '&type=1&image=' + this.imgList[0].name;
              // 第六步：将选择的文件广播给参会人员
              let obj = {  // 发送选择文件信息
                type: 'drawInfo',
                data: {
                  type: "selectFile",
                  data: {
                    fileId: index,
                    imgIndex: 0,
                    url: this.url,
                    imgList: this.imgList,
                    thisFile: this.thisFile,
                    fileAccount: this.fileAccount,
                    imgName: this.imgList[0].name
                  }
                }
              };
              this.$parent.websocketsend(obj);

              // 第七步：数组的长度决定了页码的数量
              this.total = res.result.length;
              let fileObj = {
                imgsrc: this.url,
                fileId: index,
                imgIndex: 0,
              }
              // 第八步：将选择的图片信息发送给父组件，默认选择第一张
              this.$emit('Url', fileObj);
              // 第九步：初始化url，方便切换页码的时候拼路径
              this.url = 'http://192.168.96.105:9090/documentation/no_token/reader.action/';
            }
          });
        }


      } else {
        this.$message({
          type: 'info',
          message: '您不是主持人，无权切换文件！'
        });
      }
    },
    handleCurrentChange(val) { // 点击切换页码
      console.log(`当前页:`, val);
      // 第一步：拼图片路径
      this.url += this.thisFile + '?';
      this.url += 'appid=minyanan_chanpin&account=' + this.fileAccount + '&type=1&image=' + this.imgList[val - 1].name;
      // 第二步：将选择的文件广播给参会人员
      let obj = {  // 发送选择文件信息
        type: 'drawInfo',
        data: {
          type: "selectFile",
          data: {
            fileId: null,
            imgIndex: val - 1,
            url: this.url,
            imgList: this.imgList,
            thisFile: this.thisFile,
            fileAccount: this.fileAccount,
            imgName: this.imgList[val - 1].name
          }
        }
      };
      this.$parent.websocketsend(obj);

      let fileObj = {
        imgsrc: this.url,
        fileId: null,
        imgIndex: val - 1
      }
      // 第三步：将选择的图片信息发送给父组件，默认选择第一张
      this.$emit('Url', fileObj);
      // 第四步：初始化url，方便切换页码的时候拼路径
      this.url = 'http://192.168.96.105:9090/documentation/no_token/reader.action/';
    },
    handleEdit(index, row) { // 点击共享操作
      // 第一步：获取到自己的用户名，加入row
      row.account = window.localStorage.getItem("account");
      console.log(index, row)
      if (row.btn_style == 'success') { // 点击共享
        // 第二步：将状态改为已共享
        this.tableData[index].btn_style = 'danger';
        this.tableData[index].btn_text = '已共享';
        // 第三步：将共享的文件添加到files
        this.files.push(row);
        let obj = { // 发送共享文件信息
          type: 'drawInfo',
          data: {
            type: "files",
            files: this.files,
          }
        };
        // 第四步：将该房间整个共享文件files发送给放假其他人
        this.$parent.websocketsend(obj);
      } else if (row.btn_style == 'primary') {
        console.log(row)
        // this.getFileList("/");
      }
    }
  }
}
</script>
<style scoped>
.file {
  position: fixed;
  left: 15px;
  bottom: 15px;
  height: 35px;
  z-index: 12;
}
.file_box {
  text-align: center;
  width: 100%;
  padding: 2px 0;
}
.transition-box {
  width: 100%;
  height: 32px;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  background-color: #fff;
  box-sizing: border-box;
}
.file_button {
  margin: 3px;
}
.toolbar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  line-height: 35px;
  font-size: 22px;
  cursor: pointer;
  float: left;
}
.toolbar:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.el-popover {
  text-align: center !important;
}
.block {
  display: inline-block;
  float: left;
  vertical-align: middle;
}
</style>